<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义指令</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>

<body ng-app="app">

    <div class="container" ng-controller="demoCtrl">
        <h3 ng-bind="pageTitle"></h3>
        <!-- 标签形式(E) -->
        <!-- <my-panel title="自定义指令的学习" content="我是内容">
            <div class="well well-sm" contenteditable="true">
                    我要替换content,我才是真正要显示的内容部分
            </div>
        </my-panel> -->

        <!-- 属性形式(A) -->
        <!-- <div my-panel title="自定义指令的学习" content="我是内容"></div> -->

        <!-- 类名形式(C) -->
        <div class="my-panel" title="自定义指令的学习" content="我是内容" aa='bb'></div>

        <!-- 注释形式(M) -->

    </div>
    
</body>


<script id="tpl" type="text/ng-template">
    <div class="panel panel-default" >
       <div class="panel-heading"> {{title}}</div>
        
        <div class="panel-body">
        	<span ng-transclude>
        		{{content}}-{{aa}}
        	</span>
            <button class="btn btn-sm btn-success" ng-click="changeStyle('success')">切换风格</button>  
            <button class="btn btn-sm btn-primary" ng-click="changeStyle('primary')">切换风格</button>
            <button class="btn btn-sm btn-warning" ng-click="changeStyle('warning')">切换风格</button>
            <button class="btn btn-sm btn-danger" ng-click="changeStyle('danger')">切换风格</button>
            <button class="btn btn-sm btn-info" ng-click="changeStyle('info')">切换风格</button>
        </div>

        <div class="panel-footer">{{footTitle}}</panel> 
    </div>
</script>



<script src="./libs/js/angular-1.6.9.min.js"></script>
<script>
    var app=angular.module('app',[]);
    //声明自定义指令
    app.directive('myPanel',function(){
        return {
            // require: 'ngModel',
            templateUrl:'tpl',
            replace:true,
            transclude:true,
            scope:{
                content:'@',
                title:'@',
                aa:'@'
            },
            restrict:'AECM',    //A:属性，E：元素，C：class,M:注释
            
            controller:function($scope,$element,$attrs){
                $scope.footTitle='我是自定义指令控制器中定义的底部信息';

                //给自定义指令注册点击事件
                $element.on('click',function(){
                    // console.log('指令被点击');
                    // $element.css({border:'1px solid red'});

                });

                //定义方法，在自定义指令的标签中调用
                $scope.changeStyle=function(param){
                    $element.removeClass('panel-default panel-success panel-info panel-primary panel-warning panel-danger').addClass('panel-'+param);
                }
                // console.log(arguments);
            },
            link: function(scope, element, attrs) {

                //给自定义指令注册点击事件
                // element.on('click',function(){
                //     element.css({border:'1px solid blue'});
                // });

                //定义方法，在自定义指令的标签中调用
                // scope.changeStyle=function(param){
                //     element.removeClass('panel-default').addClass('panel-'+param);
                // }
                // console.log(arguments);
            }
        }    
    });
    app.controller('demoCtrl',['$scope',function($scope){
        $scope.pageTitle="自定义指令的学习";
        // $scope.footTitle='我是控制器中定义的底部信息'
    }]);
</script>
</html>